<template>
<h2>修改页面</h2>
<table border="1">
    <tr>
        <td>会员等级名称</td>
        <td>
            <input type="text" v-model="info.Rank_Name">
        </td>
    </tr>
    <tr>
        <td>会员等级状态</td>
        <td>
            <input type="radio" :value="true" v-model="info.Rank_State">启用
            <input type="radio" :value="false" v-model="info.Rank_State">禁用
        </td>
    </tr>
    <tr>
        <td>最小成长值</td>
        <td>
            <input type="text" placeholder="请输入会员最小成长值" v-model="info.Rank_MinPoint">
        </td>
    </tr>
    <tr>
        <td>最大成长值</td>
        <td>
            <input type="text" placeholder="请输入会员最大成长值" v-model="info.Rank_MaxPoint">
        </td>
    </tr>
    <tr>
        <td></td>
        <td>
            <input type="button" value="修改" class="btn btn-success" @click="SaveDate">
        </td>
    </tr>
</table>

</template>
<script setup lang="ts">
import { onMounted ,ref} from 'vue';
import axios from 'axios';
import { useRoute,useRouter } from 'vue-router';

const router=useRouter();

//创建路由对象

const route=useRoute();



const info =ref({

    Rank_Name:"",
    Rank_State:true,
    Rank_MinPoint:"",
    Rank_MaxPoint:""


})

onMounted(()=>{
    LoadData();
})

//加载数据
const LoadData=()=>{
axios.get('https://localhost:7153/api/MemberRank/GetMemberRanks',
{
    params:{
        MRid:route.params.id


    }
}

)
.then(res=>{

   info.value=res.data;

})



}

//保存数据
const SaveDate=()=>{

    if(info.value.Rank_Name==""){
        alert("会员等级名称不能为空");
        return;
    }

    axios.put('https://localhost:7153/api/MemberRank/UpdateMemberRank',info.value)
     .then(res=>{
        if(res.data>0){
            alert("修改成功");
            router.push("/ShowMemberRank")
        }
        else{
            alert("修改失败");
        }
     })


}


</script>